import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hitutor/Util/DateUtil.dart';
import 'package:hitutor/Util/Global.dart';
import 'package:hitutor/Util/HttpGo.dart';
import 'package:hitutor/Util/MyColor.dart';
import 'package:hitutor/Util/PageUtil.dart';
import 'package:hitutor/Widget/MyBgPage.dart';
import 'package:hitutor/Widget/MyDialog.dart';
import 'package:hitutor/Widget/MyImage.dart';

import 'TeachMaterialManagerFiles.dart';

class TeachMaterialManager extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TeachMaterialManager();
  }
}

class _TeachMaterialManager extends State<TeachMaterialManager> {
  delFolder(index) {
    showBtn2Dialog(context, "您確定要刪除此檔案夾嗎?", "取消", () {}, "刪除", () {
      HttpGo(context).post("/Material/DeleteOwnMaterialFolder", {"materialFolderId": folders[index]["materialFolderId"]}, (data) {
        showToast("刪除成功");
        folders.removeAt(index);
        setState(() {});
      }, (code, error) => showToast(error));
    });
  }

  List<dynamic> folders = [];

  @override
  void initState() {
    WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
      getFolders();
    });
    super.initState();
  }

  getFolders() {
    HttpGo(context).get("/Material/GetOwnMaterialFolder", {}, (data) {
      folders = data["materials"];
      setState(() {});
    }, (code, error) => showToast(error));
  }

  @override
  Widget build(BuildContext context) {
    return MyBgPage(
        "",
        Container(
            margin: EdgeInsets.fromLTRB(16, 16, 16, 24),
            // padding: EdgeInsets.fromLTRB(16, 16, 16, 16),
            decoration: Global.getWhiteBg_shadow(8, MyColor.DD),
            child: Column(children: [
              Padding(
                  padding: EdgeInsets.fromLTRB(15, 15, 15, 0),
                  child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                    LocalImage("folder.png", height: 24, width: 32),
                    Text("檔案夾", style: TextStyle(fontSize: 15, color: MyColor.Orange, fontWeight: FontWeight.bold))
                  ])),
              Container(height: 0.5, color: MyColor.Orange, margin: EdgeInsets.only(top: 6, bottom: 16)),
              Expanded(
                child: ListView.builder(
                    padding: EdgeInsets.all(0),
                    itemBuilder: (BuildContext context, int index) {
                      return ItemFolder(folders[index], key: ValueKey(index), onDelTap: () {
                        delFolder(index);
                      });
                    },
                    // onReorder: (int oldIndex, int newIndex) {
                    //   if (oldIndex < newIndex) {
                    //     newIndex -= 1;
                    //   }
                    //   var child = items.removeAt(oldIndex);
                    //   items.insert(newIndex, child);
                    //   setState(() {});
                    // },
                    itemCount: folders.length),
              )
            ])));
  }
}

class ItemFolder extends StatelessWidget {
  dynamic folder;
  Function()? onDelTap;

  ItemFolder(this.folder, {Key? key, this.onDelTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    String date = getStrTime(getTimeByUtc(folder["createdDateTime"]), DateUtil.YMD);
    if (folder["folderSize"].toString().length > 4) folder["folderSize"] = folder["folderSize"].toString().substring(0, 4);
    return GestureDetector(
        onTap: () {
          PageUtil().open(context, TeachMaterialManagerFiles(folder["materialCode"]));
        },
        child: Container(
            decoration: Global.getBg(Color(0xffe2f2f2), 8),
            padding: EdgeInsets.all(8),
            margin: EdgeInsets.symmetric(vertical: 4, horizontal: 16),
            child: Row(children: [
              LocalImage("folder-open.png", width: 20, height: 20),
              Container(width: 12),
              Expanded(
                  child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                Text("${folder["materialName"]}", style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold, color: MyColor.Green)),
                Text("$date / ${folder["folderSize"]}MB", style: TextStyle(fontSize: 12, height: 2, color: MyColor.C7D))
              ])),
              LocalImage("delete.png", width: 24, onTap: onDelTap)
            ])));
  }
}
